<template>
    <section class="server-register intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
        	<div class="page1" v-show="page===1">
      			<form-common 
      				@add="add" 
      				@search = "search"
      				:formLabel="formLabel" 
      				:formInline="formInline"
      			></form-common>
      			<table-common 
      				:loading="loading"
                    :total="total" 
                    @detail="detail" 
                    @edit="edit" 
                    @del="del"
                    @pushServer="pushServer"  
                    :tableLabel="tableLabel" 
                    :tableData="tableData" 
                    :currentType="currentType"
                    @handleCurrentChange="handleCurrentChange"
                    >
                </table-common>
        	</div>
        	
        	<div class="page2" v-if="page===2">
        		<server-register-form 
                    @goBack="goBack" 
                    :treeSeach="treeSeach"
                    >
                </server-register-form>
        	</div>
        	
        	 <div class="page3 page2" v-if="page===3">
        		<server-push-form 
                    :id="id" 
                    @closeForm="closeForm"
                    @goBack="goBack" 
                    :treeSeach="treeSeach">
                </server-push-form>
        	</div>
			<div class="page3 page2" v-if="page===4">
				<collect-detail 
					v-if="page===4"
                    :detailData="detailData" 
                    @goBack="goBack">
                </collect-detail>
			</div>
			
			<div class="page3 page2" v-if="page===5">
				<server-register-updata  
                    v-if="page===5" 
                    :updataId="updataId" 
                    :id="id" 
                    @goBack="goBack" 
                    :treeSeach="treeSeach">
                </server-register-updata>
			</div>
        </div>
    </section>
</template>

<script>
	import formCommon from "../common/formCommon"
	import serverRegisterForm from "./serverRegisterForm"
	import serverRegisterUpdata from "./serverRegisterUpdata"
	import serverPushForm from "../common/serverPushForm"
	import tableCommon from "../common/tableCommon"
	import collectDetail from "../common/collectServerDetail"
	import {componentGetYwType,
        componentSearchYwType,
        componentGetDetail,
        componentCollectAll
    } from "../common/js_css_img/serverResourceComputed"
    import {
        apiRegisterServerDelete,
    } from "../common/js_css_img/serverResourceApi"
    export default {
    	components:{
    		formCommon,
    		tableCommon,
    		serverRegisterForm,
    		serverPushForm,
    		collectDetail,
    		serverRegisterUpdata,
    	},
        data() {
          return {
          	loading:true,
          	total:0,
          	id:0,
          	updataId:0,
          	currentType:'serverRegister',
          	page:1,  //最顶层页面的切换，注册页，发布页，详细页...
          	dialog1Visible:false,
          	formInline:{
          		type:'',
          		myInput:"",
          	},
          	formLabel:[
          		{
          			type:'button',
          			placeholder:'+ 新增',
          			label:'',
          			float:"left",
          			method:'add'
          		},
          		// {
          		// 	type:'button',
          		// 	placeholder:'搜索',
          		// 	label:'',
          		// 	float:"right",
          		// 	method:'search'
          		// },
          		{
          			type:'input',
          			placeholder:'请输入资源名称',
          			label:'',
          			model:'name',
          			float:"left",
          		},
          		{
          			type:'select',
          			placeholder:'请选择业务分类',
          			label:'',
          			float:"left",
          			model:'businessTypeIds',
          			options:[],
          		},
          	],
          	tableLabel:{
          		resocureName:"资源名称",
          		serverName:'服务方名称',
          		serverType:'业务类型',
          		createrData:'创建时间',
          	},
          	tableData:[],
          	treeSeach:{
          		segment:[],/*网段类型*/
          		info_type:[],/*信息类型*/
          		business_type:[],/*业务类型*/
          	},
          	detailData:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'资源名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源标识',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源所在网段',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务方名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务类型',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'描述',
          						value:"",
          						type:'1'
          					},
          					
          				],
          			},
          			{
          				title:"资源信息",
          				lebelWidth:"150px",
          				elForm:[],
          			},
          			{
          				title:"通用策略",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'按频率控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'按流量控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问时间段',
          						value:"",
          						type:'1'
          					},
          				],
          			},
          			{
          				title:"发布信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'可发布区域',
          						value:[],
          						type:'3'
          					},
          				],
          			},
          			{
          				title:"其他",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'调用文档',
          						value:"dad",
          						type:'1'
          					},
          					
          				],
          			},
          		],
          		detailDataBackUp:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'资源名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源标识',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源所在网段',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务方名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务类型',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'描述',
          						value:"",
          						type:'1'
          					},
          					
          				],
          			},
          			{
          				title:"资源信息",
          				lebelWidth:"150px",
          				elForm:[],
          			},
          			{
          				title:"通用策略",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'按频率控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'按流量控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问时间段',
          						value:"",
          						type:'1'
          					},
          				],
          			},
          			{
          				title:"发布信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'可发布区域',
          						value:[],
          						type:'3'
          					},
          				],
          			},
          			{
          				title:"其他",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'调用文档',
          						value:"dad",
          						type:'1'
          					},
          					
          				],
          			},
          		],
          		jiekouDetailData:[/*接口表单的详情*/
          					{
          						name:'数据来源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'接口地址',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'接口协议',
          						value:"wdad",
          						type:'1'
          					},
          					{
          						name:'传输方法',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'传递方式',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'请求参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回数据',
          						value:[],
          						type:'2'
          					}
          				],
          		wenjianDetailData:[/*文件表单的详情*/
          					{
          						name:'数据来源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'FTP数据源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'文件目录',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'文件名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'数据匹配',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回接口',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件地址',
          						value:"",
          						type:'1'
          					},
          				],
          		dbdataDetailData:[/*数据表单的详情*/
          					{
          						name:'数据来源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'数据源名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'视图名或SQL名',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'数据匹配',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回接口',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件地址',
          						value:"",
          						type:'1'
          					},
          				],
          };
        },
        methods: {
        	onSubmit(){
        		
        	},
        	add(){/*新增*/
        		this.page=2;
        	},
        	search(val){/*搜索*/
        		console.log(val);
        		componentSearchYwType(this,val);
        	},
        	edit(scope){
        		this.page=5;
        		this.updataId=scope.row.id
        	},
            del(scope){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  apiRegisterServerDelete({},scope.row.id);
                  setTimeout(()=>{this.search({})},1000);
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            },
        	detail(scope){
        		console.log(scope);
        		this.page=4;
        		componentGetDetail(this, {id:scope.row.id});
        	},
        	goBack(){
        		this.page=1;
                this.search({})/*获取列表数据*/
        	},
        	pushServer(scope){
        		console.log(scope);
        		this.id = scope.row.id;
        		this.page=3;
        	},
        	getYwType(){/*获取三种类型的数据*/
        		componentGetYwType(this,'');
        		componentCollectAll(this);
        	},
            handleCurrentChange(val) {
                console.log(val)
                this.search({"pageNum":val});
            },
            closeForm(){
            	this.page=1;
            	this.search({});
            }
        },
        mounted(){
        	this.getYwType();/*获取业务类型*/
        	this.search({})/*获取列表数据*/
        }
  };
</script>

<style scoped="scoped">
    .page2{
    	width: 850px;
    }
</style>